<template>
  <div class='homePage'>
    <Navigation />

    <h2 class='title mb20'>单词是学习英语绕不过去的坎，而背单词更是众多同学面对的难题，今天整理出日常生活中常用单词，帮你轻松记单词~</h2>
    <div class='info mb20'>点击单词可展示翻译详情。 长按可展示字典页，查看更多相关信息。</div>

    <div v-for='(wd, index) in word' :key='index'>
      <h4 class='wdSubTit mb10' :id="`AnchorTit${index}`">{{ wd.subTit }}</h4>
      <div class='wdCont mb20'>
        <template
          v-for='(wsSign, wsIndex) in wd.content'
          :key='wsIndex'
        >
          <div
            v-if="isMobile"
            class='wdSign mb5'
            @touchstart="longTouch.loopZoom(wsSign.en)"
            @touchend="longTouch.clearLoopZoom(wsSign.en)"
          >
            <span>{{wsSign.en}}</span>
            <span> : </span>
            <span>{{wsSign.value}}</span>
          </div>
          <div
            v-else
            class='wdSign mb5'
            @mousedown="longTouch.loopZoom(wsSign.en)"
            @mouseup="longTouch.clearLoopZoom(wsSign.en)"
          >
            <span>{{wsSign.en}}</span>
            <span> : </span>
            <span>{{wsSign.value}}</span>
          </div>

        </template>
      </div>
    </div>

    <div class='menu'>
      <el-popover
        ref="popoverRef"
        placement="top-start"
        :virtual-ref="buttonRef"
        trigger="click"
        title="目录导航"
        virtual-triggering
        :width="260"
        @before-enter='fn.beforeEnter'
        @before-leave='fn.beforeLeave'
      >
        <div class='menuPopover'>
          <div class='isSubTit' v-for='(wd, index) in word' :key='index'
            @click='fn.gotoAnchor(index)'
          >{{ wd.subTit }}({{wd.content.length}})</div>
        </div>
      </el-popover>


<!--      <div class='btnJump vam' @click="router.push('/common')">A-Z单词组 ↵</div>-->

      <div
        :class='{"icon vam":true, "popoverVisible": fn.popoverVisible}'
        ref="buttonRef"
        v-click-outside="onClickOutside"
      ></div>
    </div>


    <!-- 翻译页面 -->
    <el-dialog class='dialogWrap' v-model="fn.dlgVisible" :title="fn.dlgTitle" width="99%" height="100%" top='10px'>
      <iframe class='iframe' :src='fn.iframeUrl'></iframe>

      <template #footer>
        <span class="dialog-footer">
          <el-button style='width: 100%' type="primary" @click="fn.dlgVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<script setup lang="ts">
import {ref, unref, reactive } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'
// import { useRouter } from 'vue-router'
import word from "@/data/CommonWord.json";
import Navigation from "@/template/Navigation.vue";

// const router = useRouter()


const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
  // console.log('123123123')
  unref(popoverRef).popperRef?.delayHide?.()
}

const isMobile = (()=>{
  const machineType = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop'
  if (machineType === 'Mobile')    {
    console.log('移动端');
    return true
  }
  console.log('PC端');
  return false
})()

const fn = reactive({
  dlgTitle:'必应翻译',
  dlgVisible: false,
  iframeUrl: 'https://cn.bing.com/translator?ref=TThis&text=&from=en&to=zh-Hans',
  speak (text:any) {
    fn.dlgVisible = true
    fn.dlgTitle = '必应翻译'

    const str = text.replace(/_/gi, " ");
    fn.iframeUrl = `https://cn.bing.com/translator?ref=TThis&text=${str}&from=en&to=zh-Hans`
  },

  gotoDict(text:any){
    // const msg = new SpeechSynthesisUtterance(text)
    // window.speechSynthesis.speak(msg);

    fn.dlgVisible = true
    fn.dlgTitle = '必应词典'
    fn.iframeUrl = `https://www.bing.com/dict/search?q=${text}&cc=cn#`
  },

  gotoAnchor(index:number){
    const element = document.querySelector(`#AnchorTit${index}`);
    // console.log('element', `#AnchorTit${index}`, element)
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  },

  popoverVisible: false,
  beforeEnter(){
    console.log(111)
    fn.popoverVisible = true
  },
  beforeLeave(){
    console.log(222)
    fn.popoverVisible = false
  },
})


const longTouch = reactive({
  firstTime: 0,
  lastTime: 0,
  timeOut: <any>null,
  setIntervals: '',
  loopZoom(text){
    // console.log("长按开始咯")
    longTouch.firstTime = new Date().getTime()
    longTouch.timeOut = setTimeout(() => {
      fn.gotoDict(text)
    }, 300);
  },
  clearLoopZoom(text){
    // console.log("长按结束咯")
    longTouch.lastTime = new Date().getTime()
    if (longTouch.lastTime - longTouch.firstTime < 300) {
      // console.log('longTouch.lastTime - longTouch.firstTime', longTouch.lastTime - longTouch.firstTime)
      fn.speak(text)
    }else{
      // fn.gotoDict(text)
    }

    if(longTouch.timeOut) clearTimeout(longTouch.timeOut);
    longTouch.timeOut = null;
  },
})
</script>
